<template>
  <div>
    <div class="mall-detail">
      <header class="header">
        <div class="title">{{info.name}}</div>
        <div class="coin">
          <img src="/src/assets/mall/small-coin.png" class="icon">
          <span>{{info.need_coin}}</span>
        </div>
      </header>
      <div class="cut-line"></div>
      <div class="details">
        <div class="title">商品简介</div>
        <div class="content" v-html="info.desc"></div>
      </div>
      <div class="cut-line"></div>
      <div class="details">
        <div class="title">使用说明</div>
        <div class="content" ref="detail" v-html="info.tips"></div>
        <div class="looking-more" @click="showContent">
          <span class="text">查看更多</span>
          <img src="/src/assets/icons/arrow-down.png" class="icon">
        </div>
      </div>
      <footer class="footer">
        <div class="info">
          价格：
          <span class="red">{{info.need_coin}}</span>
          <span class="small">惠币</span>
        </div>
        <mt-button @click.native="exchange">立即抢兑</mt-button>
      </footer>
    </div>
  </div>
</template>

<script>
  import {MessageBox} from 'Mint-ui'

  export default {
    name: 'MallDetail',
    data () {
      return {
        info: {}
      }
    },
    methods: {
      getInfo () {
        let params = {id: this.$route.params.id}
        this.$post('/vue/hui_coin/detail', params).then(data => {
          this.info = data
        })
      },
      showContent (key) {
        this.$refs.detail.parentNode.classList.remove('short')
      },
      hideContent () {
        let detail = this.$refs.detail
        if (detail !== undefined) {
          let height = this.$refs.detail.getBoundingClientRect().height
          if (height > 72) {
            detail.parentNode.classList.add('short')
          }
        }
      },
      exchange () {
        MessageBox.confirm(`确认要使用${this.info.need_coin}惠币兑换该商品吗？`, '温馨提示').then(act => {
          if (act === 'confirm') {
            let params = {goods_id: this.$route.params.id}
            this.$post('/vue/sign/buy', params).then(data => {
              MessageBox.confirm('兑换成功', '温馨提示').then(act => {
                if (act === 'confirm') {
                  this.$router.replace({name: 'HuiMine'})
                }
              })
            })
          }
        })
      }
    },
    mounted () {
      this.getInfo()
    },
    updated () {
      this.hideContent()
    }
  }
</script>

<style lang="less">
  @c-101: rgb(101, 101, 101);
  @c-120: rgb(120, 120, 120);
  @c-135: rgb(135, 135, 135);
  @c-151: rgb(151, 151, 151);
  @c-216: rgb(216, 216, 216);
  @c-red: rgb(255, 129, 98);
  @c-l-white: rgb(240, 244, 247);

  .mall-detail {
    height: 100vh;
    background-color: #FFF;
    overflow-x: hidden;
    overflow-y: scroll;
    .header {
      padding: 12px;
      text-align: left;
      .title {
        font-size: 14px;
        line-height: 20px;
        font-weight: bold;
        letter-spacing: 1px;
        color: @c-101;
      }
      .coin {
        width: 100%;
        flex: 0 0 auto;
        margin-top: 6px;
        img {
          width: 14px;
          height: 14px;
        }
        span {
          font-size: 14px;
          line-height: 20px;
          letter-spacing: 1px;
          color: @c-red;
        }
        img, span {
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
    .cut-line {
      width: 100vw;
      height: 5px;
      background-color: @c-l-white;
    }
    .details {
      padding: 12px;
      text-align: left;
      .title {
        font-size: 13px;
        line-height: 24px;
        font-weight: bold;
        color: @c-135;
      }
      .content {
        width: 100%;
        font-size: 12px;
        line-height: 24px;
        color: @c-135;
        word-break: break-all;
        table {
          width: 100%!important;
        }
        img {
          width: 100%!important;
          height: auto;
        }
      }
      .looking-more {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 0;
        padding: 12px 0;
        display: none;
        .text {
          font-size: 12px;
          line-height:24px;
          color: rgb(108, 184, 222);
          display: inline-block;
          vertical-align: middle;
        }
        .icon {
          width: 24px;
          height: 24px;
          display: inline-block;
          vertical-align: middle;
        }
      }
      &.short {
        .content {
          height: 72px;
          padding-bottom: 0;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
        }
        .looking-more {
          display: block;
          position: relative;
        } 
      }
    }
    .footer {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      border-top: 1px solid @c-216;
      .info {
        flex: 375;
        display: flex;
        padding: 0 12px;
        align-items: center;
        span {
          font-size: 14px;
          line-height: 20px;
          letter-spacing: 1px;
          color: @c-135;
          &.red {
            color: @c-red;
          }
          &.small {
            font-size: 10px;
            line-height: 14px;
            margin-left: 3px;
          }
        }
      }
      .mint-button {
        height: 40px;
        flex: 128;
        font-size: 13px;
        line-height: 24px;
        border-radius: 0;
        background-color: @c-red;
        color: #FFF;
      }
    }
  }
</style>